<template>
    <div>
        <van-list
            v-model="loading"
            :finished="finished"
            finished-text="没有更多了"
            @load="onLoad"
        >
            <!-- <van-cell
                v-for="(item, index) in list"
                :key="index"
                :title="item.content"
            /> -->
            <comment-item
                v-for="(item, index) in list"
                :key="index"
                :comments="item"
                @reply-click="$emit('reply-click', $event)"
            ></comment-item>

            <!-- <comment-item :list="list"></comment-item> -->
        </van-list>
    </div>
</template>

<script>
import { getComments } from '@/api/comment'
import CommentItem from './comment-item'

export default {
    components: {
        CommentItem
    },
    props: {
        // 文章 id 或者 评论 id
        source: {
            type: [String, Number, Object],
            required: true
        },
        // a 是对文章的评论
        // c 是对评论的回复
        type: {
            type: String,
            default: 'a'
        },
        list: {
            type: Array,
            // 数组或对象的默认值必须通过函数返回
            // default: []
            // default:function(){ return [] }
            default: () => []
        }
    },
    data () {
        return {
            // list: [],
            loading: false,
            finished: false,
            offset: null,
            limit: 10
        }
    },
    created () { },
    computed: {},
    methods: {
        // 获取评论列表
        async onLoad () {
            const { data: res } = await getComments({
                type: this.type,
                source: this.source.toString(),
                offset: this.offset,
                limit: this.limit
            })
            // console.log(res)
            const { results } = res.data
            this.list.push(...results)

            // 把评论总数量传给父组件
            this.$emit('update-comment-count', res.data.total_count)

            this.loading = false

            if (results.length) {
                this.offset = res.data.last_id
            } else {
                this.finished = true
            }
        }
    },
    watch: {}
}
</script>

<style scoped>
</style>
